<template>
    <div class="weekcontract-box">
        <div>本周签约</div>
        <el-table :data="arr" stripe
            style="width: 100%;margin-top: 10px;border-radius: 10px;font-size: 13px;color: black;font-weight: 400;">
            <el-table-column label="团队" width="180" prop="team" :align="'center'" />
            <el-table-column :label="dataInfo[0]" width="143" prop="0" :align="'center'" />
            <el-table-column :label="dataInfo[1]" width="143" prop="1" :align="'center'" />
            <el-table-column :label="dataInfo[2]" width="143" prop="2" :align="'center'" />
            <el-table-column :label="dataInfo[3]" width="143" prop="3" :align="'center'" />
            <el-table-column :label="dataInfo[4]" width="143" prop="4" :align="'center'" />
            <el-table-column :label="dataInfo[5]" width="143" prop="5" :align="'center'" />
            <el-table-column :label="dataInfo[6]" width="143" prop="6" :align="'center'" />
        </el-table>
    </div>
</template>

<script lang='ts' setup>
import api from '@/api'

import { ref } from 'vue'
let dataInfo = ref<Array<string>>([])

let arr = ref<any>([])
const getWeekContractData = async () => {
    const result = await api.workbench.getWeekContractApi()
    // console.log('getWeekContractData', result.data.data);
    for (let key in result.data.data) {

        let x: any = { team: key }
        result.data.data[key].forEach((item: any, index: string) => {
            let y: any = {}
            y[index] = Object.values(item)
            y = { ...y, ...x }
            dataInfo.value.push(Object.keys(item).join(','))
            x = y

        })
        arr.value.push(x)
    }
    // console.log(result.data.data);
}
getWeekContractData()
</script>

<style lang='scss' scoped>
.weekcontract-box {
    background-color: white;
    margin-top: 20px;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 10px;
}
</style>